<template>
  <div class="profile">
    <h2>{{ $t('message.profile') }}</h2>
    <div v-if="user">
      <p><strong>{{ $t('message.username') }}:</strong> {{ user.username }}</p>
      <p><strong>{{ $t('message.email') }}:</strong> {{ user.email }}</p>
      <p><strong>{{ $t('message.role') }}:</strong> {{ user.roleId }}</p>
      <p><strong>{{ $t('message.registrationDate') }}:</strong> {{ user.createdAt }}</p>
    </div>
    <div v-else>
      <p>{{ $t('message.loadingUserInfo') }}...</p>
    </div>
  </div>
</template>

<script>
import { useAuthStore } from '@/stores/auth'

export default {
  name: 'ProfileView',
  setup() {
    const authStore = useAuthStore()
    
    return {
      authStore
    }
  },
  data() {
    return {
      user: null
    }
  },
  async created() {
    // 获取用户信息
    this.user = this.authStore.user
  }
}
</script>

<style scoped>
.profile {
  max-width: 600px;
  margin: 2rem auto;
  padding: 2rem;
  border: 1px solid #ddd;
  border-radius: 4px;
}
</style>